<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">邀请人数</h4>
        <p class="subtitle">今年增长<span class="text-success">{{ safeInviterNumData.yearGrowth }}</span></p>
      </div>
    </div>
    <ArtLineChart class="chart" height="calc(100% - 40px)" :data="data" :xAxisData="xAxisData" :showAreaColor="true"
      :showAxisLine="false" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  inviterNumData: {
    type: Object,
    default: () => ({})
  }
})

const safeInviterNumData = computed(() => props.inviterNumData || {})

const userData = computed(() => {
  const list = safeInviterNumData.value.aoList
  if (!Array.isArray(list)) return []
  return list.map((item: any) => ({
    ...item,
    data: Number(item.data)
  }))
})

const data = computed(() =>
  userData.value.map((e: any) => e.data)
)

const xAxisData = computed(() => userData.value.map((e: any) =>
  e.statDate ? e.statDate.slice(5, 11) : ''
))

</script>

<style lang="scss" scoped>
.card {
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  padding: 20px 0 30px;

  .card-header {
    padding: 0 18px !important;
  }

  .chart {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 0;
  }
}

@media screen and (max-width: $device-phone) {
  .card {
    height: 280px;
  }
}
</style>
